<template>
	<view class="container">
		<view class="vip_card">
			<view class="title">
				京津冀一码通
			</view>
			<view class="text">
				乐游京津冀一码通用户·享多折优惠
			</view>
			<view class="back_text">
				VIP
			</view>
		</view>
		<!-- 实名认证 -->
		<view class="names_box">
			<view class="title">
				实名认证<text>（填写身份信息）</text>
			</view>
			<uni-forms :modelValue="formData" label-position="top">
				<uni-forms-item label="用户姓名" name="name">
					<uni-easyinput :inputBorder="false" type="text" v-model="formData.name" placeholder="请输入真实" />
				</uni-forms-item>
				<uni-forms-item label="证件类型" name="name">
					身份证
				</uni-forms-item>
				<uni-forms-item name="hobby" label="证件号码">
					<uni-easyinput :inputBorder="false" type="text" v-model="formData.idno" placeholder="请输入身份证号" />
				</uni-forms-item>
			</uni-forms>
		</view>
		<button class="btn">确认</button>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app"

	const formData = reactive({
		name: '',
		idno: ''
	})

	onShow(() => {

	})
	const path = ref("")
	onLoad((options) => {
		path.value = options.redirect

	})
	// 点击确认
	function submitConfirm() {
		console.log(formData)
		if (!formData.name) {
			uni.showToast({
				title: '请输入真实姓名',
				icon: 'error'
			})
		} else if (!/^\d{15}|\d{18}$/.test(formData.idno)) {
			uni.showToast({
				title: '请输入正确身份证号',
				icon: 'error'
			})
		} else {
			console.log('验证ok')
			// 调添加的接口  重定向到 详情页面
			if (path.value) {
				uni.reLaunch({
					path: path.value
				})
			} else {
				uni.navigateBack()
			}

		}
	}
</script>

<style lang="less" scoped>
	.container {
		padding: 30rpx 20rpx;
		box-sizing: border-box;

		.vip_card {
			width: 100%;
			height: 400rpx;
			background: #471010;
			color: #f2e2ae;
			margin-bottom: 20rpx;
			border-radius: 20rpx;
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.back_text {
				color: #7b4f40;
				position: absolute;
				right: 0;
				top: 0;
				line-height: 400rpx;
				padding-right: 20rpx;
				font-size: 70rpx;
				z-index: 0;
			}

			.title {
				font-size: 50rpx;
				padding-bottom: 50rpx;
				position: relative;
				z-index: 2;
			}

			.text {
				font-size: 25rpx;
				position: relative;
				z-index: 2;
			}
		}

		.names_box {
			margin-top: 30rpx;
			width: 100%;
			background: #fff;
			padding: 20rpx;
			box-sizing: border-box;
			border-radius: 30rpx;

			.title {
				font-weight: 600;
				font-size: 34rpx;


				text {
					font-weight: 400;
					font-size: 30rpx;
				}
			}

			.uni-forms-item {
				display: flex;
				align-items: center;
				flex-direction: unset;
				border-bottom: 1rpx solid #efefef;
				margin: 0;
				padding-top: 20rpx;

			}

			.uni-forms-item__label {
				padding: 0 !important;
			}
		}

		.btn {
			margin-top: 40rpx;
			width: 90%;
			border: none;
			background: #f8dc9b;
			border-radius: 60rpx;
		}

		.btn::after {
			border: none;
		}
	}
</style>